<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="1200px" :title="`${drawerProps.title}`">
    <!-- 查询表单 -->
    <ProForm ref="proForm" :columns="columns" :row="drawerProps.row" :type="drawerProps.type" />

    <template #footer>
      <el-button v-show="drawerProps.type != OperatorType.VIEW" type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="drawerVisible = false">取消</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="ModConfigDetail">
import { ref, reactive } from "vue";
import { ProFormInstance, ColumnProps } from "@/components/ProForm/interface";
import { Mod } from "@/api/interface";
import ProForm from "@/components/ProForm/index.vue";
import { ElMessage } from "element-plus";
import { OperatorType } from "@/enums/enum";

// ProTable 实例
const proForm = ref<ProFormInstance>();

// 表格配置项
const columns = reactive<ColumnProps[]>([
  {
    key: "columnId",
    label: "ID",
    el: "input",
    visible: false
  },
  {
    key: "modId",
    label: "模块ID",
    el: "input",
    visible: false
  },
  {
    key: "columnName",
    label: "字段名",
    el: "input"
  },
  {
    key: "columnLabel",
    label: "字段中文名",
    el: "input"
  },
  {
    key: "isPrimaryKey",
    label: "是否主键",
    el: "switch",
    span: 4
  },
  {
    key: "isSystemColumn",
    label: "是否固定列",
    el: "switch",
    span: 4
  },
  {
    key: "isAllowNull",
    label: "是否允许为空",
    el: "switch",
    span: 4
  },
  {
    key: "dataType",
    label: "数据类型",
    el: "select",
    enum: [
      { label: "String", value: "String" },
      { label: "Integer", value: "Integer" },
      { label: "Decimal", value: "Decimal" },
      { label: "Date", value: "Date" },
      { label: "Char", value: "Char" }
    ]
  },
  {
    key: "dataLength",
    label: "长度",
    el: "input-number"
  },
  {
    key: "dataScale",
    label: "小数位数",
    el: "input-number"
  },
  {
    key: "defaultValue",
    label: "默认值",
    el: "input"
  },
  {
    key: "remark",
    label: "备注",
    el: "input"
  },
  {
    key: "prompt",
    label: "提示信息",
    el: "input"
  },
  {
    key: "isRequired",
    label: "是否必填",
    el: "switch"
  },
  {
    key: "validateRule",
    label: "验证规则",
    el: "input"
  },
  {
    key: "initValue",
    label: "初始值",
    el: "input"
  },
  {
    key: "formula",
    label: "计算公式",
    el: "input"
  },
  {
    key: "isHide",
    label: "是否隐藏",
    el: "switch"
  },
  {
    key: "isReadonly",
    label: "是否只读",
    el: "switch"
  },
  {
    key: "isEditReadonly",
    label: "是否编辑只读",
    el: "switch"
  },
  {
    key: "controlType",
    label: "控件类型",
    el: "select",
    enum: [
      { label: "input", value: "input" },
      { label: "input-number", value: "input-number" },
      { label: "select", value: "select" },
      { label: "select-v2", value: "select-v2" },
      { label: "cascader", value: "cascader" },
      { label: "tree", value: "tree" },
      { label: "tree-select", value: "tree-select" },
      { label: "switch", value: "switch" },
      { label: "date-picker", value: "date-picker" },
      { label: "time-picker", value: "time-picker" },
      { label: "time-select", value: "time-select" }
    ]
  },
  {
    key: "controlFormat",
    label: "格式化",
    el: "input"
  },
  {
    key: "dataSourceType",
    label: "数据源类型",
    el: "select",
    enum: [
      { label: "none", value: "none" },
      { label: "dict", value: "dict" },
      { label: "custom", value: "custom" }
    ]
  },
  {
    key: "dataSource",
    label: "数据源",
    el: "input"
  },
  {
    key: "isMultiple",
    label: "是否多选",
    el: "switch"
  },
  {
    key: "subTableName",
    label: "从表表名",
    el: "input"
  },
  {
    key: "controlWidth",
    label: "控件宽度",
    el: "select",
    enum: [
      { label: "2", value: "2" },
      { label: "4", value: "4" },
      { label: "6", value: "6" },
      { label: "8", value: "8" }
    ]
  },
  {
    key: "controlOrderNum",
    label: "控件序号",
    el: "input-number"
  },
  {
    key: "isListColumn",
    label: "是否列表字段",
    el: "switch"
  },
  {
    key: "listColumnWidth",
    label: "列表列宽度",
    el: "input-number"
  },
  {
    key: "listColumnOrderNum",
    label: "列表列序号",
    el: "input-number"
  },
  {
    key: "isSortColumn",
    label: "是否排序字段",
    el: "switch"
  },
  {
    key: "isDefaultSortColumn",
    label: "是否默认排序字段",
    el: "switch"
  },
  {
    key: "queryType",
    label: "查询类型",
    el: "select",
    enum: [
      { label: "none", value: "none" },
      { label: "eq", value: "eq" },
      { label: "like", value: "like" },
      { label: "between", value: "between" }
    ]
  },
  {
    key: "isQueryMultiple",
    label: "是否查询多选",
    el: "switch"
  },
  {
    key: "isQueryLeft",
    label: "是否左侧查询",
    el: "switch"
  },
  {
    key: "queryControlFormat",
    label: "查询格式化",
    el: "input"
  },
  {
    key: "queryOrderNum",
    label: "查询序号",
    el: "input-number"
  },
  {
    key: "sumType",
    label: "合计类型",
    el: "select",
    enum: [
      { label: "none", value: "none" },
      { label: "sum", value: "sum" },
      { label: "count", value: "count" },
      { label: "avg", value: "avg" },
      { label: "max", value: "max" },
      { label: "min", value: "min" }
    ]
  },
  {
    key: "sumColumnName",
    label: "合计字段",
    el: "input"
  },
  {
    key: "sumFormat",
    label: "合计格式化",
    el: "input"
  }
]);

interface DrawerProps {
  title: string;
  type: OperatorType;
  row: Partial<Mod.SysModColumn>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  type: OperatorType.VIEW,
  title: "",
  row: {}
});
// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;

  if (drawerProps.value.type === OperatorType.ADD) {
    drawerProps.value.row = {
      ...drawerProps.value.row,
      ...{
        isAllowNull: "1",
        dataType: "String",
        dataLength: 50,
        dataScale: 0,
        controlType: "input",
        dataSourceType: "none",
        controlWidth: 12,
        controlOrderNum: 99,
        isListColumn: "1",
        listOrderNum: 99,
        queryType: "none",
        queryOrderNum: 99,
        sumType: "none"
      }
    };
  }
};

// 提交数据（新增/编辑）
const handleSubmit = async () => {
  proForm.value?.element!.validate(async valid => {
    if (!valid) return;
    try {
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success({ message: `${drawerProps.value.title}字段成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
